<template>
  <section>
    <el-form>
      <el-form-item>
        <el-button size="mini" type="primary" @click="addBtn">+</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="list">
      <el-table-column type="index"/>
      <el-table-column label="名称" prop="title"/>
      <el-table-column label="业务">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="linkBtn(scope.row)">关联</el-button>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope" >
          <div style="display: flex;flex-direction: row;">
          <div style="width: 60px">
            <span v-if="scope.row.completed" style="color:darkgreen">运营中</span>
            <el-button v-else size="mini" type="text" @click="completeBtn(scope.row)">运用</el-button>
          </div>
          <div style="width: 80px">
            <el-button size="mini" type="text" @click="ableBtn(scope.row,!scope.row.enabled)">{{scope.row.enabled?'可用':'禁用中'}}</el-button>
          </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="editBtn(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="delBtn(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-show="totalPage>0" style="margin-top:10px;" small
                   layout="prev, pager, next"
                   :page-count="totalPage"
                   @current-change="goPage">
    </el-pagination>
    <el-dialog :visible.sync="editDialog" v-if="currDetection" :title="currDetection.id?'编辑':'新建'" append-to-body>
      <edit-detection :detection="currDetection" v-on:cancelDialog="getList" v-if="currDetection"/>
    </el-dialog>
    <el-dialog :visible.sync="showLinkDialog" v-if="showLinkDialog" title="设置" append-to-body>
      <choice-bus :detectionId="currDetection.id"/>
    </el-dialog>
  </section>
</template>

<script>
  import choiceBus from './choiceBus'
  import editDetection from './editDetection'
  import errHandler from '@/assets/errHandler.js'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  export default {
    name: "index",
    components:{editDetection,choiceBus},
    data(){
      return{
        list:null,
        totalPage:0,
        currDetection:null,
        editDialog:false,
        showLinkDialog:false
      }
    },
    created(){
      this.getList()
    },
    computed: {
      ...mapGetters(['department']),
    },
    methods:{
      ...mapActions({
        fetch: 'fetch'
      }),
      addBtn(){
        this.currDetection={title:'',companyId:this.department.companyId,detectionItems:[],data:{}}
        this.editDialog=true
      },
      goPage(val){
        this.getList(val-1)
      },
      getList(pageNo){
        this.fetch({name:"getDetectionList",data:{page:pageNo?pageNo:0}})
          .then(res=>{
            console.log('检测列表-------',res)
            this.list=res.content
            this.totalPage=res.totalPages
            this.editDialog=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      linkBtn(row){
        console.log(row)
        this.currDetection=row
        this.showLinkDialog=true
      },
      editBtn(row){
        this.currDetection=row
        this.editDialog=true
      },
      delBtn(row){
        this.$confirm('确认删除？')
          .then(()=> {
            this.fetch({name:"delDetection",data:{id:row.id}})
              .then(res=>{
                console.log('删除成功----------')
                this.getList()
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
      completeBtn(row){
        this.$confirm('运用后不可修改，请确认')
          .then(()=> {
            this.fetch({name:"completeDetection",data:{id:row.id}})
              .then(res=>{
                this.$message({type:'success',message:'运用成功!'})
                this.getList()
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
      ableBtn(row,enabled){
        this.fetch({name:"updateDetection",data:{id:row.id,enabled}})
          .then(res=>{
            this.$message({type:'success',message:enabled?'启用成功！':'禁用成功！'})
            this.getList()
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      }
    }
  }
</script>

<style scoped>

</style>
